<%--
  Created by IntelliJ IDEA.
  User: 31921
  Date: 2024/12/16
  Time: 23:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html; charset=UTF-8" language="java"
         pageEncoding="UTF-8" %>
<html>
    <head>
        <title>学生管理系统 - 登录</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
        <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
        <style>
            body {
                font-family: Arial, sans-serif;
                background-color: #f4f4f4;
                margin: 0;
                padding: 0;
                position: relative;
            }
            .container {
                max-width: 400px;
                margin: 50px auto;
                padding: 20px;
                background-color: white;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                border-radius: 8px;
                position: relative; /* 确保容器相对定位 */
                z-index: 1;

            }
            h2 {
                text-align: center;
                margin-bottom: 20px;
            }
            .input-field {
                width: 100%;
                padding: 10px;
                margin: 10px 0;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            .btn {
                width: 100%;
                padding: 10px;
                background-color: #4CAF50;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            .btn:hover {
                background-color: #45a049;
            }
            .link {
                text-align: center;
                margin-top: 10px;
            }
            .error {
                color: red;
                font-size: 12px;
                text-align: center;
            }
            /* 添加 SVG 背景样式 */
            /*svg {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 0; !* 确保 SVG 背景在容器下方 *!
            }*/


        </style>
    </head>
    <body>
        <div class="container">
            <h2>登录</h2>
            <!-- 登录表单 -->
            <form action="login" method="post">
                <input class="input-field" type="text" name="username" placeholder="用户名" required />
                <input class="input-field" type="password" name="password" placeholder="密码" required />
                <!-- 验证码图片 -->
                <div class="captcha-container">
                    <img src="captcha" alt="验证码" id="captchaImage" onclick="this.src='captcha?' + Math.random();" />
                    <input class="input-field" type="text" name="captcha" placeholder="输入验证码" required />
                </div>

                <button type="submit" class="btn">登录</button>
            </form>

            <!-- 错误信息显示 -->
            <%
                String errorMessage = (String) request.getAttribute("errorMessage");
                if (errorMessage != null && !errorMessage.isEmpty()) {
            %>
            <div class="error"><%= errorMessage %></div>
            <%
                }
            %>

            <div class="link">
                还没有账号? <a href="register.jsp">点击这里注册</a>
            </div>
        </div>